import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import { connect } from 'dva'
import {
  Input,
  Button,
  Select,
  Form,
  Modal,
  Row,
  Col,
  Icon,
  message,
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: 'none',
      account: ''
    };
  }
  componentDidMount() {
    let self = this;
    const token = localStorage.getItem('token');
    // this.props.queryStatistics({ token: token });
    self.props.e_bikeInfo({
      params: {
        token: token,
      },
      func: function (result) {

      }
    })

  }
  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);

    }
  }

  editFun = () => {
    this.context.router.push(`/1/app/kmyedit`);
  }
  lasturlFun = () => {
    this.context.router.push(`/1/app/kindex`);
  }
  carlocationurlFun = () => {
    this.context.router.push(`/1/app/carlocation`);
  }
  homeurlFun = () => {
    this.context.router.push(`/1/app/kmy`);
  }
  openFun = () => {
    let self = this;
    let token = localStorage.getItem('token');
    let v = self.state.selectVal;
    if (!v) {
      message.error('请选择电动车');
    }
    self.setState({
      loading: 'block'
    })
    self.props.update({
      params: {
        devices_id: v,
        status: 'open',
        token: token
      },
      func: function (data) {
        if (data) {
          self.state.timerNum = 0;
          self.state.timer = setInterval(() => {
            self.state.timerNum++;
            if (self.state.timerNum >= 8) {
              self.setState({
                loading: 'none'
              })
              clearInterval(self.state.timer);
            }
            self.receiveFun(data.data, 1);
          }, 4000)

        }
      }
    })

  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { data, kData } = this.props;
    let vehicleData = data || [];
    // console.log(kData);
    // console.log(this.props);
    return (
      <div className={Style.wrap}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            我的
            <span className={Style.arrowEdit} onClick={this.editFun}>编辑</span>
          </div>
        </div>

        <div className={Style.conWrap}>
          <div className={Style.mydataWrap}>
            <Row type="flex" className={Style.row}>
              <Col span={6} order={1} >
                <span className={Style.avator}>
                  <img src={`${Service.baseUrl}/${kData.avatar}`} />
                </span>
              </Col>
              <Col span={18} order={2} className={Style.datari}>
                <p>账号：{kData && kData.mobile}</p>
                <p>姓名：{kData && kData.realname}</p>
              </Col>
            </Row>
          </div>
          <ul className={Style.mylistWrap}>
            <li>
              <em></em>
              快递企业服务者团队
              <span className={Style.arrowRight}>前去查看> </span>
            </li>
          </ul>
        </div>
        <div className={Style.foot}>
          <Row type="flex">
            <Col span={8} order={1} onClick={this.lasturlFun}>
              <Icon style={{ fontSize: 20 }} type="heart" theme="outlined" /><p>最后一公里</p>
            </Col>
            <Col span={8} order={2} onClick={this.carlocationurlFun}>
              <Icon style={{ fontSize: 20 }} type="environment" theme="outlined" /><p>车辆位置</p>
            </Col>
            <Col span={8} order={2} className={Style.on} onClick={this.homeurlFun}>
              <Icon style={{ fontSize: 20 }} type="user" theme="outlined" /><p>我的</p>
            </Col>
          </Row>
        </div>
        <div className={Style.marsk} style={{ display: this.state.loading }}>
          <Icon type="loading" className={Style.loading} />
          <p className={Style.loadText}>请耐心等待...</p>
        </div>
      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  // console.log(state)
  return {
    kData: state.kmodel.kData
  }
}

function dispatchToProps(dispatch) {
  return {
    e_bikeInfo(payload, params) {
      dispatch({
        type: 'kmodel/e_bikeInfo',
        payload
      })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
